<template>
  <div>
    <p-modal
      v-drag
      :title="title"
      :visible="visible"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <p-form-model
        ref="ruleForm"
        :model="form"
        :rules="rules"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
      >
        <p-form-model-item ref="newmcode" label="新产品编码" prop="newmcode">
          <!-- <p-input v-model="form.newmcode" /> -->
          <p-select
            v-model="form.newmcode"
            show-search
            :loading="searchLoading"
            placeholder="Select a person"
            option-filter-prop="children"
            :filter-option="filterOption"
            @change="codeChange('newmcode', $event)"
          >
            <p-select-option
              v-for="(item, key) in productCodeList"
              :key="key"
              :value="item.mcode"
            >
              {{ item.mcode }}
            </p-select-option>
          </p-select>
        </p-form-model-item>

        <p-form-model-item ref="newmname" label="新产品描述" prop="newmname">
          <p-input v-model="form.newmname" />
          <!-- <p-select v-model="form.newmname">
            <p-select-option
              v-for="(item, key) in productNameList"
              :key="key"
              :value="item.mname"
            >
              {{ item.mname }}
            </p-select-option>
          </p-select> -->
        </p-form-model-item>
        <p-form-model-item
          ref="similarityMcode"
          label="相似产品编码"
          prop="similarityMcode"
        >
          <!-- <p-input v-model="form.similarityMcode" /> -->
          <p-select
            v-model="form.similarityMcode"
            show-search
            :loading="searchLoading"
            placeholder="Select a person"
            option-filter-prop="children"
            :filter-option="filterOption"
            @change="codeChange('similarityMcode', $event)"
          >
            <p-select-option
              v-for="(item, key) in productCodeList"
              :key="key"
              :value="item.mcode"
            >
              {{ item.mcode }}
            </p-select-option>
          </p-select>
        </p-form-model-item>

        <p-form-model-item
          ref="similarityMname"
          label="相似产品描述"
          prop="similarityMname"
        >
          <p-input v-model="form.similarityMname" />
          <!-- <p-select v-model="form.similarityMname">
            <p-select-option
              v-for="(item, key) in similarProductList"
              :key="key"
              :value="item.mname"
            >
              {{ item.mname }}
            </p-select-option>
          </p-select> -->
        </p-form-model-item>

        <p-form-model-item
          ref="similarityScore"
          label="相似度得分"
          prop="similarityScore"
        >
          <p-input v-model="form.similarityScore" />
        </p-form-model-item>

        <p-form-model-item
          ref="hasStimulate"
          label="是否有激励"
          prop="hasStimulate"
        >
          <!-- <p-input v-model="form.hasStimulate" /> -->
          <p-select v-model="form.hasStimulate">
            <p-select-option
              v-for="(item, key) in stimulateList"
              :key="key"
              :value="item.key"
            >
              {{ item.value }}
            </p-select-option>
          </p-select>
        </p-form-model-item>

        <p-form-model-item
          ref="isArrival"
          label="是否到货检天线"
          prop="isArrival"
        >
          <!-- <p-input v-model="form.isArrival" /> -->
          <p-select v-model="form.isArrival">
            <p-select-option
              v-for="(item, key) in arrivalList"
              :key="key"
              :value="item.key"
            >
              {{ item.value }}
            </p-select-option>
          </p-select>
        </p-form-model-item>
      </p-form-model>
    </p-modal>
  </div>
</template>
<script>
import { postAction, getAction, putAction, deleteAction } from '@/api/manage'
export default {
  data() {
    return {
      title: '',
      searchLoading: false,
      visible: false,
      confirmLoading: false,
      labelCol: { span: 8 },
      wrapperCol: { span: 12 },
      state: 'add',
      productCodeList: [],
      productNameList: [],
      similarProductList: [],
      stimulateList: [
        { key: 0, value: '否' },
        { key: 1, value: '是' },
      ],
      arrivalList: [
        { key: 0, value: '否' },
        { key: 1, value: '是' },
      ],
      form: {
        mexplain: '',
        newmcode: '',
        newmname: '',
        similarityMcode: '',
        similarityMname: '',
        similarityScore: '',
        hasStimulate: '',
        isArrival: '',
      },
      rules: {
        newmcode: [
          { required: true, message: '请输入新产品编号', trigger: 'blur' },
        ],
        newmname: [
          { required: true, message: '请输入新产品名称', trigger: 'blur' },
        ],
        similarityMcode: [
          { required: true, message: '请输入相似产品编号', trigger: 'blur' },
        ],
        similarityMname: [
          { required: true, message: '请输入相似产品名称', trigger: 'blur' },
        ],
        similarityScore: [
          { required: true, message: '请输入相似度得分', trigger: 'blur' },
        ],
        hasStimulate: [
          { required: true, message: '请输入是否有激励', trigger: 'blur' },
        ],
        isArrival: [
          { required: true, message: '请输入是否到货检天线', trigger: 'blur' },
        ],
      },
      proLineList: [],
      url: {
        add: '/mes-manpower/mesHrNewmSimilarityCoefficient',
        edit: '/mes-manpower/mesHrNewmSimilarityCoefficient',
      },
    }
  },
  created() {
    this.getCpinfoList()
    // this.handleOk()
  },
  methods: {
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      )
    },
    codeChange(name, mcode) {
      if (name == 'newmcode') {
        this.form.newmname = ''
      } else {
        this.form.similarityMname = ''
      }
      this.getCpinfoList(mcode)
    },
    getCpinfoList(mcode) {
      this.searchLoading = true
      let params = {}
      if (mcode) {
        params = {
          mcode: mcode,
        }
      } else {
        params = {
          mclassid: 4000,
          limit: 9999,
        }
      }
      getAction('/basic-business/auto/baCpinfo/queryPageNew', params).then(
        (res) => {
          if (res.success) {
            if (mcode) {
              // this.$nextTick(() => {
              this.productNameList = res.data.records
              this.similarProductList = res.data.records
              // })
              this.productNameList = res.data.records
              this.similarProductList = res.data.records
            } else {
              // this.$nextTick(() => {
              this.productCodeList = res.data.records
              // })
            }
          } else {
            this.$message.error(res.msg)
          }
          this.searchLoading = false
        }
      )
    },
    editProduct(name, code) {
      let params = {
        mcode: code,
      }
      getAction('/basic-business/auto/baCpinfo/queryPageNew', params).then(
        (res) => {
          if (res.success) {
            if (name == 'newmname') {
              this.productNameList = res.data.records
            } else {
              this.similarProductList = res.data.records
            }
          } else {
            this.$message.error(res.msg)
          }
        }
      )
    },
    showModal(record) {
      if (record) {
        this.state = 'edit'
        this.title = '编辑'
        console.log(this.form)
        console.log(record)
        for (let key in this.form) {
          this.form[key] = record[key]
          console.log(this.form[key])
          if (key == 'hasStimulate' || key == 'isArrival') {
            this.form[key] = Number(record[key])
          }
        }
        this.editProduct('newmname', this.form.newmcode)
        this.editProduct('similarityMname', this.form.similarityMcode)
        this.editId = record.id
      } else {
        this.state = 'add'
        this.title = '新增'
        this.$nextTick(() => {
          this.$refs.ruleForm.resetFields()
        })
      }

      this.visible = true
    },
    // 新增 调用表单 深拷贝form type为1 打开loding 判断add 调用网络请求 状态码为true就成功 重置表单 出发父组件的方法 调用查询刷新
    handleOk(e) {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          const params = JSON.parse(JSON.stringify(this.form))
          console.log(params)
          params.type = 1
          this.confirmLoading = true
          if (this.state == 'add') {
            postAction(this.url.add, params).then((res) => {
              console.log(res)
              if (res.success) {
                this.title = '新增'
                this.handleCancel()
                this.$emit('handleSuccess')
              } else {
                this.$message.error(res.msg)
              }
              this.confirmLoading = false
            })
          }

          if (this.state == 'edit') {
            params.id = this.editId
            putAction(this.url.edit, params).then((res) => {
              if (res.success) {
                this.title = '编辑'
                this.handleCancel()
                this.$emit('handleSuccess')
              } else {
                this.$message.error(res.msg)
              }
              this.confirmLoading = false
            })
          }
        }
      })
    },
    // 取消 重置form 重置
    handleCancel(e) {
      this.visible = false
      Object.assign(this.form, this.$options.data().form)
      this.$refs.ruleForm.resetFields()
    },
  },
}
</script>

